<template>
  <div>
    <div
      :style="{width:warpWidth+'px'}"
      class="newSideWarp"
      v-show="rightDrawerOPen"
    >
      <!-- 关闭按钮 -->
      <div
        class="closeBtn"
        @click="SET_rightDrawerOPen(false)"
      >
        <a-icon type="right" />
      </div>
      <!-- 内容 -->
      <div class="content">
        <!-- 标题 -->
        <div
          v-if="title"
          class="title"
          :class="titleCls"
        >{{ title }}<span class="subTitle">{{ subTitle }}</span></div>
        <slot></slot>
        <!-- 确定 取消按钮 -->
        <div
          v-if="showBtn"
          class="btnButtonBox"
        >
          <a-button
            type="primary"
            @click="save"
            :loading="rightDrawerLoading"
            :disabled="rightSubmitDisabled"
          >{{ $t(sureBtnName ? sureBtnName : 'sure') }}</a-button>
          <a-button
            style="margin-left: 24px"
            @click="cancel"
          >{{ $t('cancel') }}</a-button>
        </div>
      </div>
    </div>
    <!-- 打开按钮 -->
    <div
      class="openBtn"
      v-show="!rightDrawerOPen"
      @click="SET_rightDrawerOPen(true)"
    >
      <a-icon type="left" />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'RightDrawer',
  props: {
    warpWidth: {
      type: Number,
      default: 888
    },
    title: {
      type: String,
      default: ''
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    subTitle: {
      type: String,
      default: ''
    },
    // 确定按钮名称
    sureBtnName: {
      type: String,
      default: ''
    },
    // 标题类名
    titleCls: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['rightDrawerOPen', 'rightDrawerLoading', 'rightSubmitDisabled'])
  },
  watch: {
  },
  methods: {
    ...mapMutations(['SET_rightDrawerOPen', 'SET_rightSubmitDisabled', 'SET_rightDrawerLoading']),
    save () {
      this.$emit('ok')
    },
    cancel () {
      this.SET_rightDrawerOPen(false)
    },
    reset () {
      this.SET_rightDrawerOPen(false)
      this.SET_rightSubmitDisabled(true)
      this.SET_rightDrawerLoading(false)
    }
  },
  beforeDestroy () {
    this.reset()
  }
}
</script>
<style lang="less">
// 右侧抽屉样式
.newSideWarp {
  height: calc(100vh - 38px);
  min-width: 300px;
  position: absolute;
  right: 0;
  background: #fff;
  top: 0;
  display: flex;
  align-content: stretch;
  box-shadow: -5px 5px 5px #ddd;
  overflow-y: auto;
  z-index: 2000;
  .closeBtn {
    width: 20px;
    cursor: pointer;
    z-index: 2000;
    &:hover {
      background: rgb(242, 242, 242);
    }
    &::before {
      display: inline-block;
      content: '';
      height: 100%;
      vertical-align: middle;
    }
  }
  .content {
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .title {
    font-weight: bolder;
    color: #5e5e5e;
    margin-bottom: 20px;
    font-size: 1.8rem;
    flex: none;
  }
  .subTitle {
    font-weight: 500;
    font-size: 16px;
    float: right;
    padding-right: 10px;
  }
  .btnButtonBox {
    flex: none;
    text-align: center;
    margin-top: 15px;
  }
}

.openBtn {
  width: 16px;
  height: 140px;
  text-align: center;
  line-height: 140px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border: 1px solid #fff;
  cursor: pointer;
  &:hover {
    background: #fff;
    border: 1px solid #f2f2f2;
  }
}
</style>
